<template>
	<view class="con row">
		<view class="picker" v-if="isShow">
			<view class="font-small font-b" style="padding: 10rpx 50rpx;">
				<view class="flex " >
					<view class="flex-item" style="text-align: left;">所选城市：{{location.city_name}}</view>
					<view class="flex-item text-green" style="text-align: right;">
						<pickerAddress
							:address-value="{
								provinceId:location.city_row.pid,
								cityId:location.city_row.id,
								areaId:0
							}" 
							@change="changeAddress">
							切换城市
						</pickerAddress>
					</view>
				</view>
				<view class="text-left">当前门店：{{cur_store.name}}</view>				
			</view>
			<view>
				<view v-if="storeList" class="item" :key="k" v-for="(store,k) in storeList">
					<image :src="setSrc(store.images)"></image>
					<view style="padding: 5rpx;">
						<view class="flex">
							<div class="flex-item font-small  font-b">
								{{store.name}}
							</div>
							<div class="flex-item text-right font-mini">
								<uni-icons type="paperplane-filled"></uni-icons> 距您{{store.distance}}km
							</div>
						</view>
						<view class="flex">
							<view class="flex-item" style="flex:8;padding: 30rpx;" >
								<view  class="font-small text-lightgray text-left">{{store.address}}</view>
							</view>
						</view>					
					</view>
					
					<view class="flex">
						<view class="flex-item" style="justify-content: right;padding:25rpx 0rpx;border-top: 1px solid lightgray;">
							<view class="font-mini my-btn btn-black pull-right" @click="change(store)">选择门店</view>
							<view class="font-mini my-btn btn-white pull-right" @click.stop="changeShowIntro(store.id)">门店简介</view>
						</view>
					</view>

					<view class="intro font-mini text-left" v-if="store.showIntro">{{store.intro}}</view>
				</view>					
				<view v-if="noStore" style="font-size: 50rpx;margin-top: 50rpx;">该地区暂无门店</view>				
			</view>

			
			
			
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	import {calcDistance,distanceToStr}  from "@/common/js/map.js"
	import { getLocation } from '../../common/js/location';
	import pickerAddress from '../../components/pickerAddress/pickerAddress.vue';
	import http  from "@/common/js/http.js"
	import _store from '../../store';
	export default  {
		components:{pickerAddress},
		computed: {
			...mapGetters({
				location: 'user/location',
				cur_store: 'user/cur_store'
			})
		},
		data(){
			return {
				value:0,
				isShow:true,
				storeList:[],
				showIntro:false,
				noStore:false
			}
		},
		mounted() {
			this.getStoreListByName()
			getLocation()
			// this.channel=this.getOpenerEventChannel();
		},
		methods: {
			changeAddress(data){
				console.log("changeAddress",data);
				let _this=this
				let location = this.location
				if(data.cityId!==location.city_row.id){
					//变更城市
					http.get("meet.index/getDbRowByCityNameOrId",{
						cityNameOrId:data.cityId,
						isApi:true
					}).then(res=>{
						if(!!res.code){
							_store.commit("user/location",{
								city_name:res.data.name,
								city_row:res.data
							})
							_this.getStoreListByName()

						}						
					})
						

			
				}
					
			},
			changeShowIntro(storeId){
				let _this=this
				_this.storeList.forEach((item,k)=>{
					if(item.id==storeId){
						item.showIntro=!item.showIntro
						_this.$set(_this.storeList,k,item)
					}
				})
				
			},
			setSrc(v){
				return http.domainUrl+v
			},
			show(b){
				//this.isShow=b
			},
			switchOne(){this.isShow=!this.isShow},
			change(store){
				this.$store.commit("user/cur_store",store)
				this.$emit("change",store)
				this.getOpenerEventChannel().emit("changeStore",{store})
				this.show(false)
				console.log(getCurrentPages())
				uni.navigateBack()
			},
			getStoreListByName(){
				let _this=this
				let location = uni.getStorageSync('location')
				_this.storeList=[]
				_this.$api.get("meet.store/getListByCityName",{cityName:location.city_name?location.city_name:"福州市"}).then(res=>{
					if(res.status){
						_this.storeList = res.data
						_this._calcDistance(location)
						console.log("_this.storeList",_this.storeList);
					}
					_this.noStore = _this.storeList.length==0
				})
			},
			_calcDistance(location){
				let _this=this
				 _this.storeList.forEach(store=>{
					 let d = calcDistance(
					 	{latitude:store.latitude,longitude:store.longitude},
					 	{latitude:location.latitude,longitude:location.longitude}
					 )
					 store.showIntro=false
					 store.distance = d
					 store.distanceStr= distanceToStr(d)
					 
				 })
			}
		},
	}
</script>

<style scoped lang="scss">
	$yuanJiao:10rpx;
	$bg:"aliceblue";
	.con{
		position: relative;
		.picker{
			padding-top: 20rpx;
			background-color: $bg;
			width: 750rpx;
			height: 100vh; /* 视窗高度 */
			overflow-y: scroll;
			flex:1;
			z-index: 99;
			position: fixed;
			width: 750rpx;
			text-align: center;
			font-weight: 400;
			left: 0;
			.item{
				box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2);
				border-radius: $yuanJiao;
				margin:10rpx 50rpx 50rpx 50rpx;
				background-color: white;
				image{
					width: 100%;
					border-radius: $yuanJiao;
					height: 350rpx;
				}
				.remark{
					line-height: 20rpx;
					text-align: left;padding: 50rpx;
					font-size:30rpx;
				}
				.row{
					border-bottom: 1rpx solid gray;border-radius: 0 0 $yuanJiao $yuanJiao;
					position: relative;
				}
				
				.intro{
					padding: 30rpx;
				}
			}
		}
	}
</style>